<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/commons/res/taglibs.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Edit table for BackboneJS</title>
<script>var $$ctx = '${ctx}';var $$res = '${res}';var $$res_libs = '${res_libs}';var $$my = '${my}';</script>
<link rel="stylesheet" href="${res_libs}/bootstrap/css/bootstrap.min.css">
<style type="text/css">
html,body{
		height: 100%;
		width : 100%;
		margin: 0;
		padding: 0;
		font-size: 12px;
	}
	input.username{
		width : 80px;
	}
	input.age{
		width : 30px;
	}
	select.sex{
		width : 45px;
	}
	.emp-table td .edit{
		display: none;
	}
	.emp-table td.editing .edit{
		display: block;
	}
	.emp-table td.editing .display{
		display: none;
	}
	.emp-table td.no-data{
		text-align: center;
	}
</style>
</head>
<body>
<div class="container"><!-- .container -->
<h3>可编辑表格<small>00</small></h3>
<div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
            <th>Table heading</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
            <td>Table cell</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <!-- example2-->
   	<div class="row"><!-- .row -->
   	
    <div style="col-md-12" id="app">
		<div id="emp-form" class="row">
			<div class="col-md-12">
				<form class="form-horizontal">
					<div class="row">
						<div class="form-group col-sm-4">
							<label for="username" class="col-sm-4 control-label">姓名：</label>
							<div class="col-sm-8">
								<input id="username" class="form-control" name="username"/>
							</div>
						</div>
						<div class="form-group col-sm-4">
							<label for="sex" class="col-sm-4 control-label">性别：</label>
							<div class="col-sm-4">
								<select id="sex" name="sex"  class="form-control">
									<option value="0">男</option>
									<option value="1">女</option>
								</select>
							</div>
						</div>
						<div class="form-group col-sm-4">
							<label for="age" class="col-sm-4 control-label">年龄：</label>
							<div class="col-sm-4">
								<input id="age" name="age" class="form-control"/>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="form-group col-sm-4">
							<label for="position" class="col-sm-4 control-label">职位：</label>
							<div class="col-sm-8">
								<input id="position" name="position" class="form-control"/>
							</div>
						</div>
						<div class="pull-right">
							<button id="add-btn" class="btn btn-sm" type="button">增加</button>
						</div>
					</div>
					
				</form>
			</div>
		</div>
		<table class="table table-striped table-bordered emp-table" border="1" cellspacing="0" cellpadding="0">
			<caption style="font-size: 14px;font-weight: bold;">职员信息表（双击编辑）</caption>
			<thead>
				<tr>
					<th style="width: 5%">ID</th>
					<th style="width: 30%">姓名</th>
					<th style="width: 10%">性别</th>
					<th style="width: 10%">年龄</th>
					<th style="width: 40%">职位</th>
					<th style="width: 5%">操作</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<div id="pager"></div>
	    <script type="text/template" id="item-template">
 					<td>{= eid }</td>
					<td class="username"><div class="display">{= username }</div><div class="edit"><input class="username" name="username"></input></div></td>
					<td class="sex"><div class="display">{= sex=="1" ? "女":"男" }</div><div class="edit"><select name="sex" class="sex" style="width:45px"><option value="0">男</option><option value="1">女</option></select></div></td>
					<td class="age"><div class="display">{= age }</div><div class="edit"><input class="age" name="age"></input></div></td>
					<td class="position"><div class="display">{= position }</div><div class="edit"><input class="position" name="position"></input></div></td>
					<td><a href="javascript:void(0);" class="del">删除</a></td>
    	</script>
	</div>
	</div><!-- /.row -->
	
</div><!-- /.container -->

<!-- JS -->
<script type="text/javascript" src="${res_libs}/jquery.min.js"></script>
<script type="text/javascript" src="${res_libs}/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${res}/js/sea.js"></script>
<script type="text/javascript" src="${res}/js/underscore-min.js"></script>
<script type="text/javascript" src="${res}/js/backbone-min.js"></script>
<script type="text/javascript" src="${res}/js/backbone.localStorage-min.js"></script>
<script type="text/javascript" src="${my}/js/backbone/tables.js"></script>
</body>
</html>